<template>
<div style="background-color:#fff;">
  <a href="./" class="logo">
    <img src="./img/hxm_yanxuan-mall-wap_assets_img_index-2bead27820aa97c2bf8e087d53162dd911.png" alt="">
  </a>
  <div @click="toSearch" class="search">
   <i class="iconfont icon-fangdajing"></i>
   <span>搜索商品，共15221款好物</span>
  </div>
  <div class="login" @click="LoginHandel">
    登录
  </div>
</div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'',
  })
</script>

<script lang="ts" setup>
import {useRouter} from "vue-router"

const router = useRouter()
function toSearch (){
  router.push({
    path:'/search'
  })
}
function LoginHandel(){
  router.push({
    path:"/login"
  })
}
</script>

<style scoped>
.logo{
  margin-top: 10px;
  display: inline-block;
  vertical-align: middle;
}
.logo img{
  width: 100px;
  height: 100%;

}
.search{
  width: 215px;
  height: 28px;
  background: #e8e8e8;
  font-size: 14px;
  display: inline-block;
  line-height: 28px;
  color: #727478;
  border-radius: 4px;
  padding-left: 15px;
  box-sizing: border-box;
}
.login{
  display: inline-block;
  width: 45px;
  height: 20px;
  border: 1px solid red;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  border-radius: 6px;
  color: red;
  margin-left: 5px;
  vertical-align: middle;
}

</style>